<template>
	<input :value="val" :placeholder="placeholder" :maxlength="max" @input="handleInput" @blur="blur" :type="type" />
</template>

<script>
import util from '@/utils/util'

export default {
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		mode: {
			type: Number,
			default: 0
		},
		type: {
			type: String,
			default: 'text'
		},
		maxlength:{
			type: [String, Number],
			default: 30
		}
	},
	data() {
		return {
			val: '',
			loaded: false,
			max: 37
		}
	},
	created() {
		if(this.mode===0){
			this.max = parseInt(this.maxlength) + Math.ceil(parseInt(this.maxlength)/4) - 1
		} else {
			this.max = this.maxlength
		}
	},
	methods: {
		encode(text){
			let val = ''
			switch(this.mode){
				case 0:
					val = text.replace(/([\d\w]{4})$/g, '$1 ')
					break;
				case 1:
					val = parseFloat(parseInt(text) / 100)
					break;
				case 2:
					val = parseFloat(parseInt(text) / 10000)
					break;
			}
			return val
		},
		decode(text){
			let val = ''
			switch(this.mode){
				case 0:
					val = text.replace(/ /g, '')
					break;
				case 1:
					val = parseInt(parseFloat(text) * 100)
					break;
				case 2:
					val = parseInt(parseFloat(text) * 10000)
					break;
			}
			return val
		},
		handleInput(e){
			if(this.mode===0){
				this.val = this.encode(e.detail.value)
			}
			this.$emit('update:value', this.decode(e.detail.value))
		},
		blur(e){
			this.$emit('update:value', this.decode(e.detail.value))
		}
	},
	watch: {
	}
}
</script>
<style>
::-webkit-input-placeholder {
  color: #efefef;
  font-size: 16px;
}

::-moz-placeholder {
  color: #efefef;
  font-size: 16px;
}

::-ms-input-placeholder {
  color: #efefef;
  font-size: 16px;
}
</style>